<template>
  <view class="index">
    <view class="data">
      <div v-if="payObj.id" class="item_box">
        <div class="item">
          <div>
            <div class="identInfo">
              <p>
                商户单号 <span>{{ payObj.out_trade_no }}</span>
              </p>
              <p>
                下单时间 <span>{{ payObj.created_at }}</span>
              </p>
              <p>
                支付时间 <span>{{ payObj.pay_at }}</span>
              </p>
              <p>
                助绿金额
                <span class="money_color">￥{{ payObj.donate_total }}</span>
              </p>
            </div>
          </div>

          <div class="tree_info">
            <div class="title">助绿信息</div>
            <div class="tree_card">
               <div class="row" v-show="payObj.type == 2">
                <div class="span">助绿类型</div> 
                <span class="val">
                  {{ payObj.type == 2 ? "助绿金" : payObj.planting_tree_name }}
                </span>
              </div>
              <div class="row" v-show="payObj.type == 1">
                <div class="span">助绿树种</div> 
                <span class="val">
                  {{ payObj.planting_tree_name }}
                </span>
              </div>
              <div class="row">
                <div class="span">助绿规格</div>
                <span class="val">
                  {{ payObj.planting_tree_specification_name }}
                </span>
              </div>
              <div class="row">
                <div class="span">助绿镇区</div> 
                <span class="val">
                  {{ payObj.planting_area_district }}
                </span>
              </div>
              <div class="row">
                <div class="span">助绿乡村</div> 
                <span class="val">
                  {{ payObj.planting_area_name }}
                </span>
              </div>
              <div class="row">
                <div class="span">助绿数量</div> 
                <span class="val">
                  {{ payObj.donate_number }}
                  <!-- {{payObj.type == 1? "" : }} -->
                </span>
              </div>
              <div class="row">
                <div class="span">助绿名称</div> 
                <span class="val">
                  {{ payObj.name }}
                </span>
              </div>
              <div class="row">
                <div class="span">联系方式</div>
                <span class="val">
                  {{ payObj.contact_information || "无" }}
                </span>
              </div>
              <div class="row">
                <div class="span">主体类型</div>
                <span class="val">
                  {{ payObj.type == 1 ? "个人" : payObj.type == 2 ? "公司" : "未知"}}
                </span>
              </div>
              <div class="row">
                <div class="span">助绿时间</div>
                  <span class="val">
                    {{ payObj.pay_at.slice(0, 10) }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="none_data" v-else>暂无数据</div>
    </view>
  </view>
</template>

<script>
import { reactive, toRefs, onMounted, ref } from "vue";
import Taro from "@tarojs/taro";
import { useState, useDidShow } from "@tarojs/taro";
// info
import { useInfoStore } from '../../store/info'

export default {
  name: "ReInfo",
  components: {},
  setup() {
    // 仓库
    const infoStore = useInfoStore()

    // 路由参数
    const payObj = reactive({
      openid_mp: Taro.getStorageSync("openid"), //
      // typeIndex: 0,
      imageUrl: "",
      type: 1, //助绿主体类型，1个人，2公司/组织
      name: "", //助绿主体名称
      contact_information: "", //助绿主体联系方式
      donate_amount: 0, //助绿金额，单价
      donate_number: 0, //助绿数量
      donate_total: 0, //助绿金额，合计,
      planting_area_id: 0, // 种植区域id
      planting_area_name: "", //种植区域乡村
      planting_area_district: "", //种植区域镇区
      planting_tree_id: 0, //种植树种id
      planting_tree_name: "", //种植树种名称
      planting_tree_specification_id: 0, //种植树种规格id
      planting_tree_specification_name: "", //种植树种规格名称
      picture_path: "", //图片
    });
    // 获取路由参数
    const getParentVal = () => {
      const pages = Taro.getCurrentPages();
      const currentPage = pages[pages.length - 1];
      const route = currentPage.route;
      const currentOptions = currentPage.options
      if (route && currentOptions.id) {
        for (var key in currentOptions) { 
            if (currentOptions.hasOwnProperty(key)) { // 确保key是a对象自身的属性，而不是从原型链上继承的  
                payObj[key] = currentOptions[key] == "null"? null : currentOptions[key];  
            }  
        }
      } else {
        Taro.showToast({
          title: '无数据',
          icon: 'none',
          duration: 2000
        })
        setTimeout(()=>{
          Taro.switchTab ({
            url: `/pages/reInfo/index`,
          });
        }, 200)
      }
    };
    // 使用 useDidShow 钩子替代 onShow 生命周期
    useDidShow(() => {
      getParentVal()
    });

    onMounted(() => {
    });

    return {
      getParentVal,
      payObj,
    };
  },
};
</script>

<style lang="scss">
.data {
  background-color: #f6f6f6;
  width: 100vw;
  min-height: 100vh;
  font-size: 4.5vw;
  // height: 100vh;
  .none_data {
    width: 100vw;
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
  }
}
.tree_info {
  margin-top: 2vh;
  padding-bottom: 2vh;
  background-color: #fff;
  font-size: 4.5vw;
  .title {
    text-align: left;
    font-weight: 600;
    margin-left: 3vw;
    padding-top: 2vh;
    margin-bottom: 2vh;
  }
  .tree_card {
    width: 84vw;
    border-radius: 4vw;
    margin-left: 5vw;
    padding: 2vh 3vw;
    background-color: #f6f6f6;
    .row {
      display: flex;
      // align-items: center;
      color: #aaa;
      text-align: left;
      margin-bottom: 1.2vh;
      .span {
        font-weight: 600;
        width: 30vw;
        color: #000;
      }
      span {
        flex: 1;
      }
      .val {
        // font-size: 4.8vw;
      }
    }
  }
}

.item_box {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 2vh;
  // color: #65e963;
  // color: #4cae4f;
  // color: hsl(219, 75%, 65%);
  .identInfo {
    background-color: #fff;
    width: 100vw;
    p {
      display: flex;
      justify-content: space-between;
      color: #000;
      padding: 2vh 3vw 2vh 3vw;
      span {
        color: #aaa;
      }
      .money_color {
        color: #00a565;
      }
    }

  }
  .item2 {
    font-size: 4vw;
    margin-bottom: 2vh;
    text-align: left;
    width: 86vw;
    background-color: #fff;
    border-radius: 3vw;
    padding: 1vh 3vw;
    .top {
      display: flex;
      justify-content: space-between;
      margin: 0 2vw;
      .middle {
        display: flex;
        flex-direction: column;
        .spec {
          color: #aaa;
        }
      }
      .right {
      }
    }
    .bottom {
      margin: 0 2vw;
    }
    .aaa {
      color: #aaa;
    }
  }
  p {
    margin: 0.5vh 0;
  }
}
</style>
